<!DOCTYPE html>
<html>
<head>
    <title>炫酷的树形结构</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1c1c1e;
            color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        .content {
            flex-grow: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .content h1 {
            font-size: 48px;
            margin-bottom: 30px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

        .content pre {
            background-color: #2b2b2b;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            font-size: 18px;
            max-width: 800px;
            width: 100%;
            overflow-x: auto;
        }

        .tree {
            width: 400px;
            background-color: #2b2b2b;
            border-left: 1px solid #3b3b3b;
            padding: 30px;
            overflow-y: auto;
        }

        .tree ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .tree li {
            padding: 10px 20px;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 5px;
        }

        .tree li:before {
            content: "▶";
            color: #7289da;
            margin-right: 10px;
            transition: transform 0.3s;
        }

        .tree li:hover {
            background-color: #3b3b3b;
            color: #fff;
        }

        .tree li.active {
            /*background-color: #0634e3;*/
            color: #fff;
            font-weight: bold;
        }

        .tree li.active:before {
            transform: rotate(90deg);
        }

        .tree .children {
            display: none;
            padding-left: 20px;
            animation: slideDown 0.3s ease-in-out;
        }

        @keyframes slideDown {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .tree .file-name {
            color: #ccc;
        }

        .tree .folder {
            color: #7289da;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="tree">
        <ul>
            <li class="active" data-type="folder">
                <span class="folder">项目 1</span>
                <ul class="children">
                    <li data-type="folder">
                        <span class="folder">src</span>
                        <ul class="children">
                            <li data-type="folder">
                                <span class="folder">components</span>
                                <ul class="children">
                                    <li class="file" data-content="这是组件 A 的代码"><span class="file-name">ComponentA.js</span></li>
                                    <li class="file" data-content="这是组件 B 的代码"><span class="file-name">ComponentB.js</span></li>
                                </ul>
                            </li>
                            <li data-type="folder">
                                <span class="folder">pages</span>
                                <ul class="children">
                                    <li class="file" data-content="这是页面 A 的代码"><span class="file-name">PageA.js</span></li>
                                    <li class="file" data-content="这是页面 B 的代码"><span class="file-name">PageB.js</span></li>
                                </ul>
                            </li>
                            <li class="file" data-content="这是入口文件的代码"><span class="file-name">index.js</span></li>
                        </ul>
                    </li>
                    <li data-type="folder">
                        <span class="folder">tests</span>
                        <ul class="children">
                            <li class="file" data-content="这是测试文件 A 的代码"><span class="file-name">TestA.js</span></li>
                            <li class="file" data-content="这是测试文件 B 的代码"><span class="file-name">TestB.js</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="content">
        <h1>文件内容</h1>
        <pre class="file-content">请在右侧选择一个文件查看内容</pre>
    </div>
</div>

<script>
    const treeItems = document.querySelectorAll('.tree li');
    const fileContents = document.querySelector('.file-content');

    // 添加点击事件监听器
    treeItems.forEach(item => {
        item.addEventListener('click', toggleTreeItem);
    });

    function toggleTreeItem(event) {
        event.stopPropagation();
        const item = event.currentTarget;
        const children = item.querySelector('.children');

        // 切换当前节点的展开/收起状态
        item.classList.toggle('active');
        if (children) {
            children.style.display = item.classList.contains('active') ? 'block' : 'none';
        }

        // 如果点击的是文件节点,显示文件内容
        if (item.classList.contains('file')) {
            fileContents.textContent = item.dataset.content;
        }
    }
</script>
</body>
</html>